<template>
  <div class="auth-container">
    <div class="auth-card">
      <div class="auth-header">
        <img src="@/assets/vue.svg" alt="Server Logo" class="logo">
        <h1>Join <span>BlockVerse</span></h1>
        <p>Create your account to start playing</p>
      </div>

      <form @submit.prevent="handleRegister" class="auth-form">
        <div class="input-group">
          <label>Minecraft Username</label>
          <input
              type="text"
              v-model="form.username"
              placeholder="Enter your in-game name"
              required
              @input="validateUsername"
          >
          <p class="input-hint" v-if="usernameHint">{{ usernameHint }}</p>
        </div>

        <div class="input-group">
          <label>Email Address</label>
          <input
              type="email"
              v-model="form.email"
              placeholder="your@email.com"
              required
              @input="validateEmail"
          >
          <p class="input-hint" v-if="emailHint">{{ emailHint }}</p>
        </div>

        <div class="input-group">
          <label>Password</label>
          <input
              type="password"
              v-model="form.password"
              placeholder="At least 8 characters"
              required
              @input="validatePassword"
          >
          <div class="password-strength">
            <div
                class="strength-bar"
                :class="{
                weak: passwordStrength === 1,
                medium: passwordStrength === 2,
                strong: passwordStrength === 3
              }"
            ></div>
            <span class="strength-text">{{ passwordStrengthText }}</span>
          </div>
        </div>

        <div class="input-group">
          <label>Confirm Password</label>
          <input
              type="password"
              v-model="form.confirmPassword"
              placeholder="Re-enter your password"
              required
              @input="validatePasswordMatch"
          >
          <p class="input-error" v-if="passwordError">{{ passwordError }}</p>
        </div>

        <div class="input-group">
          <label>Age Verification</label>
          <div class="age-verify">
            <input
                type="checkbox"
                id="age-verify"
                v-model="form.ageVerified"
                required
            >
            <label for="age-verify">I am at least 13 years old</label>
          </div>
        </div>

        <div class="terms-agreement">
          <input
              type="checkbox"
              id="terms"
              v-model="form.agreeTerms"
              required
          >
          <label for="terms">
            I agree to the <a href="/terms" target="_blank">Terms of Service</a> and
            <a href="/privacy" target="_blank">Privacy Policy</a>
          </label>
        </div>

        <button
            type="submit"
            class="auth-btn primary"
            :disabled="!formValid"
            :class="{ disabled: !formValid }"
        >
          <span>Create Account</span>
          <svg viewBox="0 0 24 24" width="20">
            <path fill="currentColor" d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
          </svg>
        </button>

        <div class="auth-divider">
          <span>or connect with</span>
        </div>

        <button type="button" class="auth-btn microsoft" @click="loginWithMicrosoft">
          <img src="@/assets/logo_128.png" alt="Microsoft" width="20">
          <span>Microsoft Account</span>
        </button>

        <div class="auth-footer">
          <p>Already have an account? <router-link to="/login">Sign in</router-link></p>
        </div>
      </form>
    </div>

    <!-- 验证码弹窗 -->
    <div class="modal-overlay" v-if="showCaptcha">
      <div class="captcha-modal">
        <h3>Verify You're Human</h3>
        <div class="captcha-box">
          <!-- 这里放置验证码实现 -->
          <p class="captcha-text">Enter the code: <strong>M1NECR4FT</strong></p>
          <input
              type="text"
              v-model="captchaInput"
              placeholder="Enter the code above"
          >
        </div>
        <div class="modal-actions">
          <button class="modal-btn cancel" @click="showCaptcha = false">Cancel</button>
          <button class="modal-btn confirm" @click="verifyCaptcha">Confirm</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, reactive } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 表单数据
const form = reactive({
  username: '',
  email: '',
  password: '',
  confirmPassword: '',
  ageVerified: false,
  agreeTerms: false
})

// 验证状态
const usernameHint = ref('')
const emailHint = ref('')
const passwordStrength = ref(0)
const passwordError = ref('')
const showCaptcha = ref(false)
const captchaInput = ref('')

// 密码强度文本
const passwordStrengthText = computed(() => {
  const texts = ['Very Weak', 'Weak', 'Medium', 'Strong']
  return texts[passwordStrength.value] || ''
})

// 表单验证状态
const formValid = computed(() => {
  return (
      form.username.length >= 3 &&
      /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email) &&
      form.password.length >= 8 &&
      form.password === form.confirmPassword &&
      form.ageVerified &&
      form.agreeTerms
  )
})

// 验证用户名
const validateUsername = () => {
  if (form.username.length < 3) {
    usernameHint.value = 'Username must be at least 3 characters'
  } else if (!/^[a-zA-Z0-9_]+$/.test(form.username)) {
    usernameHint.value = 'Only letters, numbers and underscores allowed'
  } else {
    usernameHint.value = ''
  }
}

// 验证邮箱
const validateEmail = () => {
  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) {
    emailHint.value = 'Please enter a valid email address'
  } else {
    emailHint.value = ''
  }
}

// 验证密码强度
const validatePassword = () => {
  const hasLower = /[a-z]/.test(form.password)
  const hasUpper = /[A-Z]/.test(form.password)
  const hasNumber = /[0-9]/.test(form.password)
  const hasSpecial = /[^A-Za-z0-9]/.test(form.password)

  let strength = 0
  if (form.password.length > 0) strength++
  if (form.password.length >= 8) strength++
  if ((hasLower && hasUpper) || (hasLower && hasNumber) || (hasUpper && hasNumber)) strength++
  if (hasSpecial && form.password.length >= 10) strength++

  passwordStrength.value = strength
}

// 验证密码匹配
const validatePasswordMatch = () => {
  if (form.password !== form.confirmPassword) {
    passwordError.value = 'Passwords do not match'
  } else {
    passwordError.value = ''
  }
}

// Microsoft登录
const loginWithMicrosoft = () => {
  window.location.href = 'https://login.live.com/oauth20_authorize.srf?client_id=YOUR_CLIENT_ID&response_type=code&redirect_uri=YOUR_REDIRECT_URI&scope=XboxLive.signin%20offline_access'
}

// 处理注册
const handleRegister = () => {
  if (!formValid.value) return

  showCaptcha.value = true
}

// 验证验证码
const verifyCaptcha = () => {
  if (captchaInput.value === 'M1NECR4FT') {
    // 验证成功，提交表单
    console.log('Registration data:', form)
    router.push('/verify-email') // 跳转到验证页面
  } else {
    alert('Incorrect verification code')
  }
}
</script>

<style scoped>
.auth-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at top, #0a0a1a 0%, #0a0a0a 100%);
  padding: 2rem;
}

.auth-card {
  width: 100%;
  max-width: 480px;
  background: rgba(20, 20, 30, 0.8);
  border-radius: 16px;
  padding: 2.5rem;
  border: 1px solid rgba(68, 170, 255, 0.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
}

.auth-header {
  text-align: center;
  margin-bottom: 2rem;
}

.logo {
  width: 70px;
  height: 70px;
  margin-bottom: 1rem;
}

h1 {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  color: #e0e0e0;
}

h1 span {
  background: linear-gradient(90deg, #44aaff, #8844ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.auth-header p {
  color: #aaa;
  font-size: 0.95rem;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.input-group label {
  color: #e0e0e0;
  font-size: 0.9rem;
  font-weight: 500;
}

.input-group input {
  padding: 0.8rem 1rem;
  background: rgba(10, 10, 20, 0.8);
  border: 1px solid rgba(68, 170, 255, 0.2);
  border-radius: 8px;
  color: white;
  font-size: 1rem;
  transition: all 0.3s;
}

.input-group input:focus {
  outline: none;
  border-color: #44aaff;
  box-shadow: 0 0 0 2px rgba(68, 170, 255, 0.2);
}

.input-hint {
  font-size: 0.75rem;
  color: #44aaff;
  margin-top: 0.25rem;
}

.input-error {
  font-size: 0.75rem;
  color: #ff5555;
  margin-top: 0.25rem;
}

.password-strength {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 0.5rem;
}

.strength-bar {
  flex: 1;
  height: 4px;
  background: #444;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.strength-bar::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: calc(var(--strength, 0) * 33.33%);
  transition: width 0.3s;
}

.strength-bar.weak::after {
  background: #ff5555;
  width: 33%;
}

.strength-bar.medium::after {
  background: #ffaa00;
  width: 66%;
}

.strength-bar.strong::after {
  background: #55ff55;
  width: 100%;
}

.strength-text {
  font-size: 0.75rem;
  color: #aaa;
}

.age-verify {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.age-verify label {
  font-size: 0.85rem;
  color: #aaa;
}

.terms-agreement {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 1rem 0;
}

.terms-agreement label {
  font-size: 0.8rem;
  color: #aaa;
  line-height: 1.4;
}

.terms-agreement a {
  color: #44aaff;
  text-decoration: none;
}

.auth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 0.8rem;
  border-radius: 8px;
  font-weight: 500;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s;
  border: none;
}

.auth-btn.primary {
  background: linear-gradient(90deg, #44aaff, #8844ff);
  color: #0a0a0a;
}

.auth-btn.primary:hover:not(.disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(68, 170, 255, 0.3);
}

.auth-btn.primary.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.auth-btn.microsoft {
  background: rgba(255, 255, 255, 0.1);
  color: #e0e0e0;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.auth-btn.microsoft:hover {
  background: rgba(255, 255, 255, 0.15);
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #666;
  font-size: 0.8rem;
  margin: 0.5rem 0;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

.auth-footer {
  text-align: center;
  margin-top: 1.5rem;
  color: #666;
  font-size: 0.9rem;
}

.auth-footer a {
  color: #44aaff;
  text-decoration: none;
}

/* 验证码弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(5px);
}

.captcha-modal {
  background: #0f0f1a;
  border-radius: 12px;
  padding: 1.5rem;
  width: 90%;
  max-width: 400px;
  border: 1px solid rgba(68, 170, 255, 0.3);
}

.captcha-modal h3 {
  color: #e0e0e0;
  margin-bottom: 1.5rem;
  text-align: center;
}

.captcha-box {
  background: rgba(10, 10, 20, 0.8);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.captcha-text {
  color: #e0e0e0;
  margin-bottom: 1rem;
  text-align: center;
}

.captcha-text strong {
  color: #44aaff;
  letter-spacing: 1px;
}

.captcha-box input {
  width: 100%;
  padding: 0.8rem;
  background: rgba(20, 20, 30, 0.8);
  border: 1px solid rgba(68, 170, 255, 0.3);
  border-radius: 6px;
  color: white;
  text-align: center;
  font-size: 1rem;
}

.modal-actions {
  display: flex;
  gap: 1rem;
}

.modal-btn {
  flex: 1;
  padding: 0.8rem;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
}

.modal-btn.cancel {
  background: transparent;
  color: #aaa;
  border: 1px solid #444;
}

.modal-btn.cancel:hover {
  background: rgba(255, 255, 255, 0.05);
}

.modal-btn.confirm {
  background: linear-gradient(90deg, #44aaff, #8844ff);
  color: #0a0a0a;
  border: none;
}

.modal-btn.confirm:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(68, 170, 255, 0.3);
}

@media (max-width: 480px) {
  .auth-card {
    padding: 1.5rem;
  }

  .logo {
    width: 60px;
    height: 60px;
  }
}
</style>